<script setup>
import { ref } from "vue";
import BasicsPie from "./components/basicsPie.vue";
import CrosswiseBar from "./components/crosswiseBar.vue";
import Gauge from "./components/gauge.vue";
import ListDialog from "./components/listDialog.vue";
import TwoListDialog from "../left/components/twoListDialog.vue";
import BarDialog from "../left/components/barDialog.vue";

const data = [
  { name: "中小学 (幼儿园) 校园专职保安配备率", value: 100 },
  { name: "中小学 (幼儿园) 校园封闭式管理达标率", value: 100 },
  { name: "一键式紧急报警和视频监控与公安联网率", value: 100 },
  { name: "全市中小学 (幼儿园) 护学岗设置率", value: 100 },
  { name: "市级涉教信访件 (季) 办结率", value: 100 },
];

const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
const data1 = ["沙坪坝区", "南岸区", "两江新区", "九龙坡区"];
const data2 = ["渝中区"];
const data3 = [
  { name: "两江新区", value: 189 },
  { name: "万州区", value: 119 },
  { name: "涪陵区", value: 408 },
  { name: "渝中区", value: 358 },
  { name: "大渡口区", value: 336 },
  { name: "开州区", value: 203 },
  { name: "江北区", value: 142 },
  { name: "沙坪坝区", value: 130 },
  { name: "九龙坡区", value: 123 },
  { name: "南岸区", value: 105 },
  { name: "北碚区", value: 104 },
  { name: "綦江区", value: 102 },
  { name: "大足区", value: 104 },
];
const data4 = [
  "重庆交通大学",
  "重庆医科大学",
  "重庆师范大学",
  "重庆文理学院",
  "重庆三峡学院",
  "长江师范学院",
  "四川外国语大学",
  "西南政法大学",
  "四川美术学院",
  "重庆科技大学",
  "重庆理工大学",
  "重庆工商大学",
  "重庆警察学院",
  "重庆第二师范学院",
  "重庆工商学院",
  "重庆城市科技学院",
  "重庆人文科技学院",
  "重庆邮电大学",
];

const gyzcXData = [
  "永川区",
  "荣昌区",
  "南川区",
  "潼南区",
  "开州区",
  "武隆区",
  "垫江县",
  "云阳县",
  "奉节县",
  "巫溪县",
  "彭水县",
];
const fzjyData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
</script>

<template>
  <div class="right">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="box1_c1">
        <div class="min_title">
          <img src="@/assets/images/Group15.png" alt="" />
          <span class="text-c9-55-16">安全稳定</span>
        </div>
        <div class="box1_c1_c">
          <div class="box1_c1_c_c" v-for="(item, index) in data" :key="index">
            <div class="box1_c1_c_c_c">
              <div class="text-c9-65-14">
                {{ item.name }}
              </div>
              <div class="text-gray-18">{{ item.value }}%</div>
            </div>
            <div class="text-4b-65-14 cursor-pointer">查看</div>
          </div>
        </div>
      </div>
      <div class="box1_c2">
        <div class="min_title">
          <img src="@/assets/images/Group15.png" alt="" />
          <span class="text-c9-55-16">依法治教</span>
        </div>
        <div class="box_c2_c1">
          <div class="box2_c2_c1_c1">
            <div class="box2_c2_c1_c1_t">
              <div class="text-c9-75-14">教育法律法规规章规范性文件</div>
              <div class="text-opacity-c9-55-12">目标:272个</div>
            </div>
            <div class="box2_c2_c1_c1_e">
              <BasicsPie></BasicsPie>
            </div>
          </div>
          <div class="box2_c2_c1_c2"></div>
          <div class="box2_c2_c1_c3">
            <div class="text-c9-75-14">学校章程建设</div>
            <div class="box2_c2_c1_c3_c">
              <div class="box2_c2_c1_c3_c_c">
                <div class="box2_c2_c1_c3_c_c_c">
                  <img
                    src="../../../assets/images/zcjsIcon.png"
                    class="w-5 h-5"
                  />
                  <span class="text-c9-65-12">高校核准章程</span>
                </div>
                <div class="text-gradual-blue-16">42</div>
              </div>
              <div class="box2_c2_c1_c3_c_c">
                <div class="box2_c2_c1_c3_c_c_c">
                  <img
                    src="../../../assets/images/zcjsIcon.png"
                    class="w-5 h-5"
                  />
                  <span class="text-c9-65-12">中小学备案章程</span>
                </div>
                <img src="../../../assets/images/pending.png" class="w-7 h-4" />
              </div>
            </div>
          </div>
        </div>
        <div class="box_c2_c2">
          <div class="box_c2_c2_c">
            <div class="box_c2_c2_c_c1 cursor-pointer" @click="visible4 = true">
              <div class="box_c2_c2_c_c1_c1 bg1">
                <div class="text-c9-75-14">青少年法治场馆</div>
                <div>
                  <span class="text-gray-18 mr-1">27</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
              </div>
              <div class="box_c2_c2_c_c1_c2">
                <div class="text-opacity-c9-55-12">目标:40个</div>
                <img
                  src="../../../assets/images/rightArrow.png"
                  class="rihgtArrow"
                />
              </div>
            </div>
            <div class="box_c2_c2_c_c1">
              <div class="box_c2_c2_c_c1_c1 bg1">
                <div class="text-c9-75-14">处理违规收费</div>
                <div>
                  <span class="text-gray-18 mr-1">--</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
              </div>
              <div class="box_c2_c2_c_c1_c2">
                <div class="text-opacity-c9-55-12">目标:--个</div>
                <img
                  src="../../../assets/images/rightArrow.png"
                  class="rihgtArrow"
                />
              </div>
            </div>
          </div>
          <div class="box_c2_c2_c">
            <div class="box_c2_c2_c_c1 cursor-pointer" @click="visible3 = true">
              <div class="box_c2_c2_c_c1_c1 bg2">
                <div class="text-c9-75-14">中小学法治副校长</div>
                <div>
                  <span class="text-gray-18 mr-1">4681</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
              </div>
              <div class="box_c2_c2_c_c1_c2">
                <div class="text-opacity-c9-55-12">目标:4681个</div>
                <img
                  src="../../../assets/images/rightArrow.png"
                  class="rihgtArrow"
                />
              </div>
            </div>
            <div class="box_c2_c2_c_c1">
              <div class="box_c2_c2_c_c1_c1 bg2">
                <div class="text-c9-75-14">处理违规收费</div>
                <div>
                  <span class="text-gray-18 mr-1">--</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
              </div>
              <div class="box_c2_c2_c_c1_c2">
                <div class="text-opacity-c9-55-12">目标:--个</div>
                <img
                  src="../../../assets/images/rightArrow.png"
                  class="rihgtArrow"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1_c3">
        <div class="text-c9-75-14">社会事务进校园一件事</div>
        <div class="text-4b-65-14">查看</div>
      </div>
    </div>
    <div class="title bg2"></div>
    <div class="box2">
      <div class="box2_c1">
        <div class="box2_c1_c1 cursor-pointer" @click="visible1 = true">
          <span class="text-c9-65-14"
            >接受义务教育优质均衡发展国家督导评估认定区县</span
          >
          <img src="../../../assets/images/rightArrow.png" class="rihgtArrow" />
        </div>
        <div class="box2_c1_c2">
          <CrosswiseBar label="区县数" :value="1"></CrosswiseBar>
        </div>
        <div class="box2_c1_c1 mt-2 cursor-pointer" @click="visible2 = true">
          <span class="text-c9-65-14"
            >接受学前教育普及普惠国家督导评估认定区县</span
          >
          <img src="../../../assets/images/rightArrow.png" class="rihgtArrow" />
        </div>
        <div class="box2_c1_c2">
          <CrosswiseBar label="区县数" :value="4"></CrosswiseBar>
        </div>
      </div>
      <div class="box2_c2">
        <div class="box2_c2_c">
          <div class="box2_c2_c_c">
            <span class="text-c9-65-14">
              “十四五”期间普通高等学校本科教育教学审核评估学校
            </span>
            <img
              src="../../../assets/images/rightArrow.png"
              class="rihgtArrow"
            />
          </div>
          <div class="box2_c2_c_e">
            <Gauge :data="9"></Gauge>
          </div>
        </div>
        <div class="box2_c2_l"></div>
        <div class="box2_c2_c">
          <div class="box2_c2_c_c cursor-pointer" @click="visible5 = true">
            <span class="text-c9-65-14">
              普通高等学校本科教学工作合格评估学校
            </span>
            <img
              src="../../../assets/images/rightArrow.png"
              class="rihgtArrow"
            />
          </div>
          <div class="box2_c2_c_e">
            <Gauge :data="18"></Gauge>
          </div>
        </div>
      </div>
    </div>
    <ListDialog
      :visible="visible1"
      title="接受义务教育均衡区县"
      :data="data1"
      @close="visible1 = false"
    ></ListDialog>

    <ListDialog
      :visible="visible2"
      title="接受学前教育惠普区县"
      :data="data2"
      @close="visible2 = false"
    ></ListDialog>

    <TwoListDialog
      :visible="visible3"
      title="全市中小学法治副校长 (辅导员) 详情"
      :thead="['区县', '中小学法治副校长 (辅导员) (人)']"
      :data="data3"
      @close="visible3 = false"
    >
    </TwoListDialog>

    <BarDialog
      :visible="visible4"
      title="青少年法治教育实践共享场馆详情"
      :data="fzjyData"
      :xData="gyzcXData"
      @close="visible4 = false"
    ></BarDialog>

    <ListDialog
      :visible="visible5"
      title="普通高等学校本科教学工作合格评估学校"
      :data="data4"
      @close="visible5 = false"
    ></ListDialog>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 2.75rem;
  }
  .bg1 {
    background: url(../../../assets/images/title2.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url(../../../assets/images/title3.png) no-repeat;
    background-size: 100% 100%;
  }

  .box1 {
    width: 100%;
    height: 36.125rem;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    .box1_c1 {
      width: 100%;
      height: 14rem;
      background: rgba(9, 54, 100, 0.3);
      padding-bottom: 0.75rem;
      display: flex;
      flex-direction: column;
      .box1_c1_c {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        overflow: auto;
        .box1_c1_c_c {
          flex-shrink: 0;
          width: 100%;
          height: 34px;
          padding: 0 0.75rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 2rem;
          &:nth-child(2n + 1) {
            background: rgba(255, 255, 255, 0.1);
          }
          &:nth-child(2n) {
            background: rgba(255, 255, 255, 0.05);
          }
          .box1_c1_c_c_c {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.625rem;
          }
        }
      }
    }
    .box1_c2 {
      flex: 1;
      width: 100%;
      background: rgba(9, 54, 100, 0.3);
      display: flex;
      flex-direction: column;
      .box_c2_c1 {
        width: 100%;
        height: 5.5rem;
        display: flex;
        gap: 0.75rem;
        .box2_c2_c1_c1 {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          .box2_c2_c1_c1_t {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-left: 12px;
          }
          .box2_c2_c1_c1_e {
            flex: 1;
            height: 100%;
          }
        }
        .box2_c2_c1_c2 {
          height: 100%;
          border: 1px solid;
          border-image: linear-gradient(
              rgba(0, 178, 238, 0),
              rgba(0, 178, 238, 0.7),
              rgba(0, 178, 238, 0)
            )
            1 1;
        }
        .box2_c2_c1_c3 {
          width: 154px;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding-right: 12px;
          .box2_c2_c1_c3_c {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px;
            .box2_c2_c1_c3_c_c {
              flex: 1;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .box2_c2_c1_c3_c_c_c {
                flex: 1;
                height: 100%;
                display: flex;
                align-items: center;
                gap: 0.125rem;
              }
            }
          }
        }
      }
      .box_c2_c2 {
        flex: 1;
        height: 100%;
        padding: 10px 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        .box_c2_c2_c {
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 6px;
          .box_c2_c2_c_c1 {
            flex: 1;
            width: 100%;
            display: flex;
            gap: 39px;
            .box_c2_c2_c_c1_c1 {
              width: 266px;
              height: 100%;

              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-left: 12px;
              gap: 10px;
            }
            .bg1 {
              background: url(../../../assets/images/yfzj1.png) no-repeat;
              background-size: 100% 100%;
            }
            .bg2 {
              background: url(../../../assets/images/yfzj2.png) no-repeat;
              background-size: 100% 100%;
            }
            .box_c2_c2_c_c1_c2 {
              flex: 1;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
    }
    .box1_c3 {
      width: 100%;
      height: 2.5rem;
      background: rgba(9, 54, 100, 0.3);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .min_title {
      width: 100%;
      height: 2.125rem;
      display: flex;
      align-items: center;
      padding-left: 0.75rem;
      img {
        width: 18px;
        height: 18px;
        // margin-left: 12px;
        margin-right: 8px;
      }
    }
  }

  .box2 {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .box2_c1 {
      width: 100%;
      height: 120px;
      background: rgba(9, 54, 100, 0.3);
      padding: 12px;
      display: flex;
      flex-direction: column;
      // gap: 10px;
      .box2_c1_c1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .box2_c1_c2 {
        flex: 1;
      }
    }
    .box2_c2 {
      flex: 1;
      width: 100%;
      background: rgba(9, 54, 100, 0.3);
      padding: 12px;
      display: flex;
      gap: 12px;
      .box2_c2_c {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .box2_c2_c_c {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
        }
        .box2_c2_c_e {
          width: 100%;
          flex: 1;
        }
      }
      .box2_c2_l {
        height: 100%;
        border: 1px solid;
        border-image: linear-gradient(
            rgba(0, 178, 238, 0),
            rgba(0, 178, 238, 0.7),
            rgba(0, 178, 238, 0)
          )
          1 1;
      }
    }
  }

  .rihgtArrow {
    width: 16px;
    height: 14px;
    cursor: pointer;
  }
}
</style>
